<script setup>
	import {reactive, ref} from 'vue'
	import {useRouter} from 'vue-router'

	const router = useRouter()
	const forgetForm = reactive({
		username: '',
		telephone: '',
		captcha: '',
		repassword: '',
	})
	// 获取验证码
	const captchaStatus = ref(false)
	const codeMsg = ref('获取验证码')
	const getCaptcha = () => {
		captchaStatus.value = true
		loopTimer(Date.now())
	}
	/** 倒计时 */
	function loopTimer(_st) {
		let _time = 60 - Math.ceil((Date.now() - _st) / 1000)
		if (_time > 0) {
			codeMsg.value = `重新获取(${_time}s)`
			setTimeout(function () {
				loopTimer(_st)
			}, 1000)
		} else {
			codeMsg.value = `获取验证码`
			captchaStatus.value = false
		}
	}

	// 重置密码
	const  forget =()=>{
		console.log(forgetForm)
	}
</script>
<template>
	<h2 class="f30  mb22">重置密码</h2>
	<el-form :model="forgetForm"  :size="'large'" class="login-form">
		<el-form-item >
			<el-input v-model="forgetForm.username" placeholder="请输入用户名"></el-input>
		</el-form-item>
		<el-form-item >
			<el-input v-model="forgetForm.telephone" placeholder="请输入手机号" show-password></el-input>
		</el-form-item>
		<div class="flex mb22" >
			<el-input  v-model="forgetForm.captcha" placeholder="请输入验证码"></el-input>
			<el-button type="primary" class="ml20" :loading="captchaStatus" @click="getCaptcha" :disabled="captchaStatus">
				{{ codeMsg }}
			</el-button>
		</div>
		<el-form-item >
			<el-input v-model="forgetForm.repassword" placeholder="请输入新密码" show-password></el-input>
		</el-form-item>
		<el-form-item>
			<el-button type="primary"  style="width: 100%" @click="forget">重置</el-button>
		</el-form-item>
		<div>
			<el-link style="float: right" type="primary" @click="router.push('/login')" >去登录</el-link>
		</div>
	</el-form>
</template>

<style scoped lang="scss">
	*{
		user-select: none;
	}
	.el-form{
		width: 420px;
	}
</style>